<template>
    <div class="InfiniteScroll">
        <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
            <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                <div ref="scrollItemBar">
                    <div class="scroll_item" v-for="(item, index) in sortList" :key="index">
                        <div class="flex">
                            <div class="name">{{item.name}}</div>
                            <div class="flex e-flex-1">
                                <div class="bar" :style="{'width': parseFloat(item.weight)/maxWeight*100 + '%'}">
                                </div>
                            </div>
                            <div class="text-right e-p-l-20">
                                <span class="weight">{{ item.weight }}</span>
                                <span class="unit">KG</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-html="copyHtml"></div>
                <!-- <div v-html="copyHtml"></div> -->
            </div>
            <!-- <div v-if="list.length<6" class="scroll_list">
                <div ref="scrollItemBar">
                    <div class="scroll_item" v-for="(item, index) in list" :key="index">
                        <div class="flex">
                            <div>{{item.name}}</div>
                            <div class="e-flex-1" style="text-align: center;padding:0 15px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">{{ item.weight }}</div>
                        </div>
                    </div>
                </div>
                <div v-html="copyHtml"></div>
            </div> -->
        </div>
    </div>
</template>

<script>
let bartimer = null;
export default {
    name: "InfiniteScroll",
    props:{
        list: []
    },
    data() {
        return {
            scrollTop: 0, //列表滚动高度
            speed: 15, //滚动的速度

            listData: [], //表示有多少个列表项
            copyHtml: '', //复制多一份防止滚动到后面出现空白
            maxWeight: 300
        };
    },
    mounted() {
        console.log('InfiniteScroll-data',this.list)
        if(this.list.length > 0){
            this.maxWeight = this.list[0].weight
            for (let i = 1; i < this.list.length; i++) {
                if (this.list[i].weight > this.maxWeight) {
                    this.maxWeight = this.list[i].weight;
                }
            }
            console.log('maxWeight',this.maxWeight)
            // 如果列表数据是异步获取的，记得初始化在获取数据后再调用
            this.initScroll()
        }
    },
    unmounted(){
        clearInterval(bartimer)
    },
    computed:{
        sortList(){
            return this.list.sort((a,b)=>Number(b.weight) - Number(a.weight))
        }
    },
    methods: {
        formatName(name) {
            var newStr;
            if (name.length === 2) {
                newStr = name.substr(0, 1) + '*';
            } else if (name.length > 2) {
                var char = '';
                for (var i = 0, len = name.length - 2; i < len; i++) {
                    char += '*';
                }
                newStr = name.substr(0, 1) + char + name.substr(-1, 1);
            } else {
                newStr = name;
            }
            return newStr;
        },
        initScroll() {
            this.$nextTick(() => {
                this.copyHtml = this.$refs.scrollItemBar.innerHTML
                this.startScroll()
            })
        },
        // 鼠标移入停止滚动
        mEnter() {
            clearInterval(bartimer);
        },
        // 鼠标移出继续滚动
        mLeave() {
            this.startScroll()
        },
        // 开始滚动
        startScroll() {
            bartimer = setInterval(this.scroll, this.speed);
        },
        // 滚动处理方法
        scroll() {
            this.scrollTop++
            // 获取需要滚动的盒子的高度
            if(this.$refs.scrollItemBar == undefined){
                clearInterval(bartimer);
                return
            }
            let scrollItemBar = this.$refs.scrollItemBar.offsetHeight
            
            // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
            if (this.scrollTop >= scrollItemBar) {
                this.scrollTop = 0
            }
        }

    },
};
</script>

<style lang="scss" scoped>
.InfiniteScroll {
    box-sizing: border-box;
}

.scroll_parent_box {
    width: 100%;
    height: 200px;
    /* border: 1px solid #ebeef5; */
    overflow: hidden;
    box-sizing: border-box;
    /* padding: 0 10px; */
}

.scroll_list {
    transition: all 0ms ease-in 0s
}

.scroll_item {
    height: 40px;
    line-height: 40px;
    /* text-align: center; */
    font-size: 14px;
    .flex{
        align-items: center;
    }
    .name{
        width: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
    .bar{
        background: linear-gradient(to right, #4729FB, #3077F7, #1FB0F4);
        height: 14px;
        line-height: 14px;
        text-align: center;
    }
    .weight{
        font-weight: bold;
        font-size: 18px;
    }
    .unit{
        font-size: 12px;
    }
}
</style>

